<template>
  <div class="range-warpper">
    <el-form
      ref="ruleform"
      :model="form"
      :rules="rulesForm"
      label-width="120px"
    >
      <el-row>
        <el-col :span="8">
          <el-form-item label="商品分类：" prop="shopSort">
            <el-select v-model="form.shopSort" placeholder="请选择商品分类" clearable filterable>
              <el-option
                v-for="item in pageInfo.shopSortArr"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="商品状态：" prop="shopStatus">
            <el-select v-model="form.shopStatus" placeholder="请选择商品状态" clearable filterable>
              <el-option
                v-for="item in pageInfo.shopStatusArr"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="创建时间：" prop="createTime">
            <el-date-picker
              v-model="form.createTime"
              type="datetimerange"
              :picker-options="pageInfo.pickerOptions"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              style="width: auto;"
              @change="createTimeChange"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="商品价格：" prop="shopPrice">
            <div class="input-start-end">
              <el-input v-model="form.shopPriceStart" />
              <span>-</span>
              <el-input v-model="form.shopPriceEnd" />
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="货号/商品编码：" prop="shopCode">
            <el-input v-model="form.shopCode" placeholder="多个用“，”或空格分隔" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="商品ID：" prop="shopId">
            <el-input v-model="form.shopId" placeholder="多个用“，”或空格分隔" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="商品库存：" prop="shopCount">
            <div class="input-start-end">
              <el-input v-model="form.shopCountStart" />
              <span>-</span>
              <el-input v-model="form.shopCountEnd" />
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="质量分：" prop="shopScore">
            <div class="input-start-end">
              <el-input v-model="form.shopScoreStart" />
              <span>-</span>
              <el-input v-model="form.shopScoreEnd" />
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="标题包含：" prop="shopTitle">
            <el-input v-model="form.shopTitle" placeholder="多个用“，”或空格分隔" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { formatToYMDHMS } from '../../../utils/tool'
export default {
  data() {
    return {
      pageInfo: {
        // 商品分类。null全部，0已下架，1在售，2已删除，3草稿箱，4回收站，5其他
        shopSortArr: [
          {
            label: '已下架',
            value: 0
          },
          {
            label: '在售',
            value: 1
          },
          {
            label: '已删除',
            value: 2
          },
          {
            label: '草稿箱',
            value: 3
          },
          {
            label: '回收站',
            value: 4
          },
          {
            label: '其他',
            value: 5
          }
        ],
        // 商品状态。null全部，预售类型，0现货，1全款预售，2sku预售，3成团预售(支付后N天发货)，12现货+预售，13新预售，14阶梯发货
        shopStatusArr: [
          {
            label: '现货',
            value: 0
          },
          {
            label: '全款预售',
            value: 1
          },
          {
            label: 'sku预售',
            value: 2
          },
          {
            label: '成团预售(支付后N天发货)',
            value: 3
          },
          {
            label: '现货+预售',
            value: 12
          },
          {
            label: '新预售',
            value: 13
          },
          {
            label: '阶梯发货',
            value: 14
          }
        ],
        // 审核状态。null全部，0未提交审核，1待审核，2审核通过，3审核未通过  4-封禁
        examineStatusArr: [
          {
            label: '未提交审核',
            value: 0,
            color: '#4E78EF'
          },
          {
            label: '待审核',
            value: 1,
            color: '#FFA700'
          },
          {
            label: '审核通过',
            value: 2,
            color: '#16BE4F'
          },
          {
            label: '审核未通过',
            value: 3,
            color: '#EE0000'
          },
          {
            label: '封禁',
            value: 4,
            color: '#999999'
          }
        ],
        // null全部，1是标记过鉴图，0没标记过
        beautifulImgArr: [
          {
            label: '没标记过',
            value: 0
          },
          {
            label: '标记过鉴图',
            value: 1
          }
        ],
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }]
        }
      },
      form: {
        // 商品分类 + 商品状态 + 创建时间 + 商品价格(价格、库存、质量分暂时只用start和end，普通字段保留防止后续迭代使用。例如：shopPrice用不到)
        shopSort: '',
        shopStatus: '',
        createTime: '',
        createTimeStart: '',
        createTimeEnd: '',
        shopPrice: '',
        shopPriceStart: '',
        shopPriceEnd: '',
        // 商品库存 + 质量分 + 审核状态 + 标题包含
        shopCount: '',
        shopCountStart: '',
        shopCountEnd: '',
        shopScore: '',
        shopScoreStart: '',
        shopScoreEnd: '',
        examineStatus: '',
        shopTitle: '',
        // 商品ID + 标记美图 + 货号/商品编码
        shopId: '',
        beautifulImg: '',
        shopCode: ''
      },
      rulesForm: {}
    }
  },
  methods: {
    createTimeChange() {
      if (this.form.createTime && this.form.createTime.length) {
        this.form.createTimeStart = formatToYMDHMS(this.form.createTime[0])
        this.form.createTimeEnd = formatToYMDHMS(this.form.createTime[1])
      }
    }
  }
}
</script>

<style lang="scss" scoped>
p {
  margin: 0;
  line-height: 17px;
}
::v-deep {
  .el-select {
    width: 100%;
  }
}
.input-start-end {
  display: flex;
  border: 1px solid #DCDFE6;
  border-radius: 4px;
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  // &:focus {
  //   outline: none;
  //   border-color: #1890ff;
  // }
  ::v-deep {
    .el-input input {
      border: none;
      &:focus {
        border-color: #00000000;
      }
    }
    .el-select {
      width: 100%;
    }
  }
}
.range-warpper {
  padding: 0 20px;
}
</style>
